<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 基础表格</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="__PUBLIC__/newWeb/css/bootstrap.min.css" rel="stylesheet">
    <link href="__PUBLIC__/newWeb/css/font-awesome.css" rel="stylesheet">
    <link href="__PUBLIC__/newWeb/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="__PUBLIC__/newWeb/css/animate.css" rel="stylesheet">
    <link href="__PUBLIC__/newWeb/css/style.css" rel="stylesheet">
    <style>
        .input-img {
            width: 80px;
            height: 80px;
            margin-left: 15px;
        }



        .type {
            display: none
        }



        .input-img img {
            max-width: 100%;
            max-height: 100%;
        }

        .num {
            line-height: 30px;
            width: 20px;
            float: left;
        }
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>院内陪护配置</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <form method="get" id='form' class="form-horizontal">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">请选择陪护类型</label>

                                <div class="col-sm-2">
                                    <select class="form-control m-b" id='select-first' value='' name="account">
                                        <option value='0'>请选择</option>
                                        <option value='1'>住院陪护</option>
                                        <option value='2'>居家陪护</option>
                                    </select>
                                </div>
                                <div class="col-sm-2">
                                    <select class="form-control m-b" id='select-type' value='' name="account">
                                        <option value='0'>请选择</option>
                                        
                                    </select>
                                </div>
                                <a class="btn btn-info btn-sm" id='add'><i class="fa fa-pencil"></i>&nbsp;添加</a>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="ibox-title">
                                <h5>陪护类型</h5>
                            </div>
                            <div class="form-group" id='one'>
                                <script id='one-type' type="text/x-jquery-tmpl">
                                    <div class="col-sm-12 one-template">
                                        <br>
                                        <div class="col-sm-12">
                                            <label class="col-sm-2 control-label">${one}-${two}</label>
                                            <a class="btn btn-info btn-sm" id='delete' num=${id}></i>&nbsp;删除</a>
                                            <div class="hr-line-dashed"></div>
                                        </div>
                                        <div class='form-group'>
                                            <div class="col-sm-4 center">
                                                <a class="btn btn-info btn-sm" id='add-type' num=${id}><i class="fa fa-pencil"></i>&nbsp;添加服务类型</a>&nbsp;&nbsp;
                                            </div>
                                        </div>
                                        <div id='group-box'>

                                        </div>
                                    </div>
                                </script>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="ibox-title">
                                <h5>服务类型</h5>
                            </div>
                            <div class="form-group fadeInRight">
                                <div class='col-sm-12'>
                                    <br>
                                    <div class='col-sm-12 form-group type-room'>
                                        <script id="type-room" type="text/x-jquery-tmpl">
                                            <div class='clo-sm-12 type-item' type=${name}>
                                                <div class='col-sm-1 control-label'></div>
                                                <span class='ph-name'>${name}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                                <span>${remark}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                                <span>${price}元/${num}${num_type}&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                                <span>排序：${array}</span>
                                                <a class="btn btn-white btn-sm update-server"><i class="fa fa-trash"></i>&nbsp;编辑</a>
                                                <a class="btn btn-white btn-sm add-special">&nbsp;添加特殊收费项目</a>
                                                <a class="btn btn-white btn-sm delete-server"><i class="fa fa-trash"></i>&nbsp;删除</a>
                                                <div>
                                                    <div class="hr-line-dashed"></div>
                                        </script>
                                        </div>
                                        <div class="ibox-title type">
                                            <h5>添加服务类型</h5>
                                        </div>
                                        <div class='form-group server-type type'>
                                            <br>
                                            <div class='form-group send'>
                                                <label class="col-sm-2 control-label">上传图标</label>
                                                <label class='input-img'>
                                                    <img src='__PUBLIC__/newWeb/img/add.png'/>
                                                    <div class="col-sm-3">
                                                        <input type="file" style=' display: none;' class="form-control send-img" name="worker_name">
                                                    </div>
                                                </label>
                                            </div>
                                            <div class='form-group'>
                                                <label class="col-sm-2 control-label">服务类型</label>
                                                <div class="col-sm-3">
                                                    <input type="text" class="form-control server_type" name="server-type">
                                                </div>
                                            </div>
                                            <div class='form-group'>
                                                <label class="col-sm-2 control-label">注释</label>
                                                <div class="col-sm-3">
                                                    <input type="text" class="form-control server-remark" name="server-remark">
                                                </div>
                                            </div>
                                            <div class='form-group'>
                                                <label class="col-sm-2 control-label">价格</label>
                                                <div class="col-sm-3">
                                                    <input type="text" class="form-control server-price" name="server-price">
                                                </div>
                                                <label class="num">元/</label>
                                                <div class="col-sm-1">
                                                    <input type="text" class="form-control server-num" name="server-num">
                                                </div>
                                                <div class="col-sm-1">
                                                    <select class="form-control server-num-type" name="server-num-type">
                                                        <option value='天'>天</option>
                                                        <option value='次'>次</option>
                                                    </select>
                                                </div>
                                            </div>
                                            <div class='form-group'>
                                                <label class="col-sm-2 control-label">排序</label>
                                                <div class="col-sm-3">
                                                    <input type="text" class="form-control server-array" name="server-array">
                                                </div>
                                            </div>
                                            <div class='form-group'>
                                                <div class="col-sm-6 center">
                                                    <a class="btn btn-info btn-sm" id='save-type'><i class="fa fa-pencil"></i>&nbsp;保存</a>&nbsp;&nbsp;
                                                    <a class="btn btn-info btn-sm" id='cancer-type'><i class="fa fa-trash"></i>&nbsp;取消</a>
                                                </div>
                                            </div>
                                        </div>
                                        </div>
                                    </div>

                                    <div class="hr-line-dashed"></div>
                                    <div class="ibox-title">
                                        <h5>特殊收费</h5>
                                    </div>
                                    <script id="template" type="text/x-jquery-tmpl">
                                        <div class='form-group fadeInRight spec-item' id=${time}>
                                            <div class='form-group'>
                                                <br>
                                                <label class="col-sm-2 control-label">特殊收费</label>
                                                <div class="col-sm-3">
                                                    <input type="text" class="form-control special_name" name='worker_name' value=${name}>
                                                </div>
                                            </div>
                                            <div class='form-group'>
                                                <label class="col-sm-2 control-label">注释</label>
                                                <div class="col-sm-3">
                                                    <input type="text" class="form-control special_remark" name="worker_name" value=${remark}>
                                                </div>
                                            </div>
                                            <div class='form-group'>
                                                <label class="col-sm-2 control-label">收费规则</label>
                                                <div class="col-sm-2">
                                                    <select class="form-control m-b special_rule" name="account" value=${rule}>
                                                <option value='1'>百分比</option>
                                                <option value='2'>固定值</option>
                                            </select>
                                                </div>
                                                <div class="col-sm-1">
                                                    <input type="text" class="form-control special_value" name="worker_name" value=${value}>
                                                </div>
                                            </div>
                                            <div class='form-group'>
                                                <label class="col-sm-2 control-label">排序</label>
                                                <div class="col-sm-3">
                                                    <input type="text" class="form-control special_array" name="worker_name" value=${array}>
                                                </div>
                                            </div>
                                            <div class='form-group'>
                                                <div class="col-sm-6 center">
                                                    <a class="btn btn-info btn-sm save-special" time=${time} live=${live} id=${saveId}><i class="fa fa-pencil"></i>{{if live==0}}&nbsp;保存{{/if}}{{if live==1}}&nbsp;修改{{/if}}</a>&nbsp;&nbsp;
                                                    <a class="btn btn-info btn-sm delete-special" time=${time} id=${deleteId}><i class="fa fa-trash"></i>&nbsp;删除</a>
                                                </div>
                                            </div>
                                            <div class="hr-line-dashed"></div>
                                        </div>
                                    </script>
                                </div>
                                <div class='form-group center'>

                                    <a class="btn btn-info  save-special" id='send'>提交</a> &nbsp;&nbsp;&nbsp;&nbsp;

                                    <a class="btn btn-info  save-special">取消</a>

                                </div>
                        </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 全局js -->
            <script src="__PUBLIC__/newWeb/js/jquery.min.js"></script>
            <script src="__PUBLIC__/newWeb/js/bootstrap.min.js"></script>

            <!-- iCheck -->
            <script src="__PUBLIC__/newWeb/js/plugins/iCheck/icheck.min.js"></script>

            <!-- Peity -->
            <script src="__PUBLIC__/newWeb/js/plugins/peity/jquery.peity.min.js"></script>
            <!-- template -->
            <script src="__PUBLIC__/newWeb/js/demo/peity-demo.js"></script>
            <script src='__PUBLIC__/newWeb/js/jquery.tmpl.min.js'></script>

            <script>
                var typeArr = {};
                var isUpdate = false;
                var oneTag = false;//判断是否添加了陪护项目
                $(document).ready(function () {
                    $('.i-checks').iCheck({
                        checkboxClass: 'icheckbox_square-green',
                        radioClass: 'iradio_square-green',
                    });
                    //上传图片
                    $('.send-img').on("change", function (e) {
                        var file = e.target.files[0]
                        preview(file);
                    })

                    //第一级选择框
                    $("#select-first").on("change", function () {
                        if ($(this).val() == 1) {
                            $("#select-type").html("<option value='0'>请选择</option><option value='1'>普通陪护</option><option value= '2' > 产科陪护</option>")
                        } else if ($(this).val() == 2) {
                            $("#select-type").html("<option value='0'>请选择</option><option value='3'>普通陪护</option><option value= '4' > 月嫂</option>")
                        } else {
                            $("#select-type").html("<option value='0'>请选择</option>");
                        }
                    })
                    function preview(file) {
                        var src = URL.createObjectURL(file);
                        $('.input-img img').attr('src', src)
                    }
                    //添加陪护类型
                    $("#add").on("click", function () {
                        if (!oneTag) {
                            var id = $("#select-type").val();
                            var firstText = $("#select-first option:selected").text();
                            var lastText = $("#select-type option:selected").text();
                            var temp = [{ one: firstText, two: lastText, num: id }]
                            $("#one-type").tmpl(temp).appendTo('#one');
                            oneTag = true;
                            //删除陪护类型
                            $("#delete").on("click", function () {
                                $(".one-template").remove();
                                oneTag = false;
                            })
                            //添加陪护类型详情
                            $("#add-type").on("click", function () {
                                if ($(".type-item").size() > 0) {
                                    return false
                                } else {
                                    $(".spec-item").remove();
                                    clearServer();
                                    $(".type").show();
                                    isUpdate = false;
                                }
                            })
                        }
                    })
                    //保存陪护详情
                    $("#save-type").on("click", function () {
                        var type = $(".server_type").val();
                        var remark = $(".server-remark").val();
                        var price = $(".server-price").val();
                        var num = $(".server-num").val();
                        var num_type = $(".server-num-type option:selected").val();
                        var array = $(".server-array").val();
                        if (!isUpdate) {
                            addServer(type, remark, price, num, num_type, array);
                        } else {
                            $(".type-item").remove();
                            updateServer(type, remark, price, num, num_type, array)
                        }
                        var temp = [{ name: type, remark: remark, price: price, num: num, num_type: num_type, array: array }];
                        $("#type-room").tmpl(temp).appendTo('.type-room');
                        server();
                        //添加特殊服务
                        $(".add-special").on("click", function () {
                            var time = new Date().getTime();
                            var temp = [{ live: 0, name: '', remark: '', rule: '', value: '', array: "", time: time, saveId: 'save_' + time, deleteId: 'delete_' + time }];
                            $("#template").tmpl(temp).appendTo('#form');
                            special(time)
                        })
                        $(".type").hide();
                        clearServer();
                    })
                    //提交

                    $("#send").on("click", function () {
                        $.post("{:U('PhManager/addHospitalType')}", typeArr, function (res) {

                        })

                    })
                    //取消陪护类型详情
                    $("#cancer-type").on("click", function () {
                        $(".type").hide();
                        clearServer();
                    })
                    //添加特殊服务到数据中
                    function addSpecial(id, name, remark, rule, value, array) {
                        typeArr.special.push({
                            id: id,
                            name: name,
                            remark: remark,
                            rule: rule,
                            value: value,
                            array: array,
                        })
                        console.log(typeArr)
                        return
                    }
                    //修改特殊服务到数据
                    function updateSpecial(id, name, remark, rule, value, array) {
                        for (var j = 0, k = typeArr.special.length; j < k; j++) {
                            if (typeArr.special[j].id == id) {
                                typeArr.special[j].name = name;
                                typeArr.special[j].remark = remark;
                                typeArr.special[j].rule = rule;
                                typeArr.special[j].value = value;
                                typeArr.special[j].array = array;
                                break;
                            }
                        }
                        console.log(typeArr)
                        return
                    }
                    //添加陪护详情到数据中
                    function addServer(type, remark, price, num, num_type, array) {
                        typeArr.type = type;
                        typeArr.remark = remark;
                        typeArr.price = price;
                        typeArr.hid = 1;
                        typeArr.num = num;
                        typeArr.num_type = num_type;
                        typeArr.array = array;
                        typeArr.special = [];
                    }
                    //修改陪护详情 
                    function updateServer(type, remark, price, num, num_type, array) {
                        typeArr.type = type;
                        typeArr.remark = remark;
                        typeArr.sub_type = sub_type;
                        typeArr.price = price;
                        typeArr.num = num;
                        typeArr.num_type = num_type;
                        typeArr.array = array;
                    }
                    //特殊服务按钮事件
                    function special(clickId) {
                        //保存特殊服务
                        $("#save_" + clickId).on("click", function () {
                            var id = $(this).attr('time');
                            $(this).html("<i class='fa fa- pencil'>修改")
                            var live = $(this).attr('live');
                            var name = $("#" + id + " .special_name").val();
                            var remark = $("#" + id + " .special_remark").val();
                            var rule = $("#" + id + " .special_rule").val();
                            var value = $("#" + id + " .special_value").val();
                            var array = $("#" + id + " .special_array").val();
                            if (live == 0) {
                                addSpecial(id, name, remark, rule, value, array);
                                $(this).attr('live', '1')
                            } else if (live == 1) {
                                updateSpecial(id, name, remark, rule, value, array);
                            }
                        })
                        //删除特殊服务
                        $("#delete_" + clickId).on("click", function () {
                            var id = $(this).attr('time')
                            var type = $(this).attr('type');
                            for (var j = 0, k = typeArr.special.length; j < k; j++) {
                                if (typeArr.special[j].id == id) {
                                    typeArr.special.splice(j, 1);
                                    console.log(typeArr)
                                    break;
                                }
                            }
                            $("#" + id).remove();
                        })
                    }
                    function server() {
                        //删除陪护详情
                        $(".delete-server").on("click", function () {
                            $(this).parent().remove();
                            $(".spec-item").remove();
                            typeArr = {};
                        })
                        //编辑陪护详情和特殊服务
                        $(".update-server").on("click", function () {
                            isUpdate = true;
                            $(".spec-item").remove();
                            setServer(typeArr)
                            for (var j = 0, k = typeArr.special.length; j < k; j++) {
                                setSpecial(typeArr.special[j]);
                            }
                        })
                    }
                    //清空陪护详情
                    function clearServer() {
                        $(".server_type").val('');
                        $(".server-remark").val('');
                        $(".server-price").val('');
                        $(".server-num").val('');
                        $(".server-num-type").val('');
                        $(".server-array").val('');
                    }
                    //设置陪护详情
                    function setServer(data) {
                        $(".type").show();
                        $(".server_type").val(data.type);
                        $(".server-remark").val(data.remark);
                        $(".server-price").val(data.price);
                        $(".server-num").val(data.num);
                        $(".server-num-type").val(data.num_type);
                        $(".server-array").val(data.array);
                    }

                    //生成特殊服务
                    function setSpecial(data) {
                        var temp = [{ live: 1, name: data.name, remark: data.remark, rule: data.rule, value: data.value, array: data.array, type: data.type, time: data.id, saveId: 'save_' + data.id, deleteId: 'delete_' + data.id }];
                        $("#template").tmpl(temp).appendTo('#form');
                        special(data.id)
                    }

                });
            </script>




</body>

</html>